<script setup>
import CardComponent from "@/components/CardComponent.vue";
import { ref } from "vue";
import { Plus, Search, Delete, Edit } from '@element-plus/icons-vue'
import { manageGetAllCategory, manageQueryCategoryLikeByNameOrType, manageDeleteCategoryById, manageUpdateCategoryById, updateCategoryStatusById, addCategory } from "@/api/manage"
import { formatOperateTime } from "@/utils/format";
import { ElMessage, ElMessageBox } from 'element-plus'
import dialogShow from "@/components/dialogShow.vue";
const formValues = ref({
  name: '',
  type: ''
})
const categoryList = ref(null)
const getAllCategory = async () => {
  const res = await manageGetAllCategory()
  categoryList.value = res.result
  // console.log(categoryList.value);
}
getAllCategory()

// 查询classification
const onQueryClassification = async () => {
  const { result } = await manageQueryCategoryLikeByNameOrType(formValues.value)
  // console.log(result);
  categoryList.value = result
}

// 删除classification
const onDeleteCategoryById = async (id) => {
  try {
    await ElMessageBox.confirm(
      "请问是否确定删除该分类",
      "温馨提示",
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    await manageDeleteCategoryById({ id })
    getAllCategory()
  } catch (e) {
    ElMessage.info('已取消删除')
  }

}

// 修改classification
const isShowInfo = ref(false)
const categoryInfo = ref({
  id: '',
  type: '',
  name: '',
  sort: ''
})
const onShowInfo = (id) => {
  isShowInfo.value = true
  categoryInfo.value = JSON.parse(JSON.stringify(categoryList.value.find(item => item.id === id)))
  // console.log(categoryInfo.value);

}

// 提交更新
const onSubmit = async () => {
  await manageUpdateCategoryById(categoryInfo.value)
  isShowInfo.value = false
  getAllCategory()
}

// 更新状态
const onChangeStatus = async (id, status) => {
  if (status === 1) {
    await updateCategoryStatusById({ id: id, status: 2 })
  } else {
    await updateCategoryStatusById({ id, status: 1 })
  }
  getAllCategory()
}

// 添加分类
const isShowAdd = ref(false)
const addTitle = ref(null)
const addFormValues = ref({
  type: null,
  name: null,
  sort: null
})
// 开启套餐

const onAddCategory = (type) => {
  isShowAdd.value = true
  if (type === 'dish') {
    addTitle.value = '新增菜品分类'
    addFormValues.value.type = 1
  } else {
    addTitle.value = '新增套餐分类'
    addFormValues.value.type = 2
  }
}

const onSubmitAdd = async () => {
  await addCategory(addFormValues.value)
  isShowAdd.value = false
  getAllCategory()
}
</script>

<template>
  <div>
    <CardComponent :isNeedHead=false cardHeight="500px" cardWidth="100%">
      <div class="classification-header">
        <span>
          <el-form :inline="true" :model="formValues">
            <el-form-item label="分类名称:">
              <el-input v-model="formValues.name" placeholder="请填写分类名称"></el-input>
            </el-form-item>
            <el-form-item label="分类类型">
              <el-select v-model="formValues.type" placeholder="请选择" clearable>
                <el-option label="菜品分类" value="1"></el-option>
                <el-option label="套餐分类" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onQueryClassification">查询</el-button>
            </el-form-item>
          </el-form>
        </span>
        <span>
          <el-button size="large" :icon="Plus" @click="onAddCategory('dish')">新增菜品分类</el-button>
          <el-button size="large" :icon="Plus" @click="onAddCategory('package')">新增套餐分类</el-button>
        </span>
      </div>
      <div>
        <el-table style="width: 100%;" :data="categoryList">
          <el-table-column label="分类名称" width="180" prop="name"></el-table-column>
          <el-table-column label="分类类型">
            <template #default="{ row }">
              {{ row.type === 1 ? "菜品分类" : "套餐分类" }}
            </template>
          </el-table-column>
          <el-table-column label="排序" prop="sort" width="120"></el-table-column>
          <el-table-column label="状态" width="120">
            <template #default="{ row }">
              {{ row.status === 1 ? "启用" : "禁止" }}
            </template>
          </el-table-column>
          <el-table-column label="操作时间">
            <template #default="{ row }">
              {{ formatOperateTime(row.updateTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" class-name="operation-column">
            <template #default="{ row }">
              <el-button type="primary" :icon="Search" @click="onShowInfo(row.id)">修改</el-button>
              <el-button type="danger" :icon="Delete" @click="onDeleteCategoryById(row.id)">删除</el-button>
              <el-button type="warning" :icon="Edit" v-if="row.status === 1"
                @click="onChangeStatus(row.id, row.status)">禁用</el-button>
              <el-button type="success" :icon="Edit" v-else @click="onChangeStatus(row.id, row.status)">启用</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </CardComponent>
    <!-- 展示classification -->
    <dialogShow title="修改分类" v-model="isShowInfo" :need-footer=false>
      <el-form :model="categoryInfo">
        <el-form-item label="分类编号">
          <el-input v-model="categoryInfo.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="分类类别">
          <el-select v-model="categoryInfo.type">
            <el-option label="菜品分类" :value=1 />
            <el-option label="套餐分类" :value=2 />
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input v-model="categoryInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="分类排名">
          <el-input v-model="categoryInfo.sort"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="isShowInfo = false">取消</el-button>
        </el-form-item>
      </el-form>
    </dialogShow>
    <!-- 新增分类 -->
    <dialogShow v-model="isShowAdd" :need-footer=false :title="addTitle">
      <el-form :model="addFormValues">
        <el-form-item label="分类名称">
          <el-input placeholder="请输入分类名称" v-model="addFormValues.name"></el-input>
        </el-form-item>
        <el-form-item label="分类排序">
          <el-input placeholder="请输入分类排序" v-model="addFormValues.sort"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitAdd">确定</el-button>
          <el-button @click="isShowAdd = false">取消</el-button>
        </el-form-item>
      </el-form>
    </dialogShow>
  </div>
</template>

<style>
.el-select .el-select__wrapper {
  width: 192px;
}

.el-form .el-form-item {
  margin: 0 10px;
}
</style>
<style scoped>
.classification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 操作列的按钮排版 */
:deep(.operation-column .cell) {
  display: flex;
  gap: 8px;
  justify-content: center;
  /* 可选：增加按钮间距，让排版更美观 */
}

:deep(.operation-column .cell .el-button) {
  width: 60px;
}

:deep(.el-dialog .el-form-item) {
  margin-bottom: 18px
}

:deep(.el-dialog .el-select .el-select__wrapper) {
  width: 380px;
}
</style>
